<style>
	.pagetitle { width: 100%; text-align: center; color: darkorange; text-shadow: 1px 1px 5px #999;}
	.item { width: 60px; font-size: 14px; font-weight: 600; color: #666666; cursor: pointer; }
	.item:hover { color: red;}
	.item.choosed { color: darkorange;}
	
	.cities, .ordertypes{width: 100%; height: 32px; border-bottom: 1px solid #cccccc; border-top: 1px solid #cccccc; }
	.city, .ordertype { text-align: center;}
	.gyms, .users  { width: 100%;  margin-top: 20px; flex-flow: row wrap; align-content: flex-start; overflow: auto;}
	.gym, .user { width: 160px; height: 30px; font-size: 12px; margin-left: 20px;}
	.users { background-color: #eee; box-shadow: 2px 2px 6px darkgrey; padding: 20px 30px; max-height: 280px;}
	.user { width: 800px;}
</style>
<section>
	<div id="vm">
		<h3 class="pagetitle">Top会员排序</h3>
		<div class="cities line">
			<div class="city item" :class="city == 'nation' ? 'choosed':''" @click="choosenation()">全国</div>
			<div v-for="(item, i) in cities" class="city item" :class="item.city == city ? 'choosed' : ''" @click="choosecity(item.city)">{{item.city}}</div>
		</div>
		<div class="gyms line" v-if="city != 'nation'">
			<div class="gym item" :class="gymid == -1 ? 'choosed':''" @click="chooseallgym()">全部门店</div>
			<div v-for="(item, i) in gyms" class="gym item" :class="item.gymid == gymid ? 'choosed' : ''" @click="choosegym(item.gymid)">{{item.gymname}}</div>
		</div>
		<div class="ordertypes line" style="justify-content: space-around;">
			<div v-for="(item, i) in ordertypes" class="ordertype item" :class="item.type == ordertype ? 'choosed' : ''" @click="chooseordertype(item.type)" style="width: 100px;">{{item.name}}</div>
		</div>
		<div class="loading" v-if="loading">加载中…………</div>
		<div class="users line" v-if="!loading">
			<div v-for="(user, i) in users" class="user item" :class="user.user_code == userid ? 'choosed' : ''" @click="chooseuser(user.user_code)">
				第{{i + 1}}名：ID：{{user.user_code}}，电话：{{user.tele}}，昵称：{{user.username}}（{{shownumber(user)}}）
			</div>
		</div>
		<div class="userhistory"></div>
	</div>
</section>
<script>
	
	var vm = new Vue({
		el: '#vm',
		data: {
			cities: [],
			city: C.city,
			gyms: [],
			gymid: C.gymid,
			ordertypes: [{name: '按订单金额', type: 'deal_price'}, {name: '按订单数量', type: 'signs'}, {name: '按购课节数', type: 'all_times'}],
			ordertype: 'deal_price',
			users: [],
			userid: 0,
			loading: false,
		},
		methods: {
			choosecity: function(i){
				if(this.loading) return;
				this.city = i;
				this.showgyms();
			},
			choosenation: function(){ // 选择全国
				if(this.loading) return;
				this.city = 'nation'
				this.showusers()
			},
			showgyms: function(){
				let that = this;
				post(dataDomain + "data/post.php/ksap/users/city_gyms", {"city": this.city}, function(r){
					console.log(r);
					that.gyms = r.data;
					that.gymid = r.data[0].gymid
					that.showusers()
				})
			},
			choosegym: function(i){
				if(this.loading) return;
				this.gymid = i;
				this.showusers()
			},
			chooseordertype: function(i){
				if(this.loading) return;
				this.ordertype = i
				this.showusers()
			},
			chooseallgym: function(){
				if(this.loading) return;
				this.gymid = -1;
				this.showusers()
			},
			showusers: function(){
				let that = this;
				$(".userhistory").html(""); 
				that.loading = true;
				post(dataDomain + "data/post.php/ksap/users/user_orders", {"city": this.city, "gymid": this.gymid, "order": this.ordertype}, function(r){
					console.log(r);
					that.loading = false;
					that.users = r.data;
					
				})
			},
			shownumber: function(u){ // 在学员排名表中，括号内显示所排序项目，该学员的数值
				if(this.ordertype == 'deal_price'){
					return '共消费￥' + Number(u.deal_price).toFixed(2) + '元'
				}
				if(this.ordertype == 'signs'){
					return '共签订正式课合同' + u.signs + '份'
				}
				if(this.ordertype == 'all_times'){
					return '共购买' + u.all_times + '节课'
				}
			},
			chooseuser: function(i){
				this.userid = i
				D.userid = i;
				$(".userhistory").load('pages/users/userhistory.html');
			}
		},
		mounted: function(){
			let that = this;
			post(dataDomain + "data/post.php/ksap/gyms/cities", {}, function(r){
				that.cities = r.data
				that.showgyms()
				// that.showcoaches()
			})
		}
	})
</script>